<template>
  <div id="app">
    <!-- 模态框 -->
    <div>
      <h4>模态框：</h4>
      <button @click="openModal">点击打开模态框</button>
      <my-modal
        :modalShow="modalShow"
        :modalWidth="500"
        :borderRadius="15"
        :headerColor="'lightblue'"
        :headerText="'This is a SUPER MODAL'"
        :headerTextColor="'#fff'"
        :contentText="'This is a content in body.'"
        :contentTextColor="'#333'"
        :position="'center'"
        :btnGroupShow="true"
        :confirmBtnText="'是'"
        :cancelBtnText="'否'"
        @confirm="modalConfirm"
        @close="modalClose"
      >
      </my-modal>
    </div>
    <hr />
    <!-- 带输入框的下拉菜单 -->
    <div>
      <h4>带输入框的下拉菜单:</h4>
      <my-selector
        placeholder="请选择框架"
        :selectorInputData="selectorInputData"
        @setItemValue="setItemValue"
      ></my-selector>
    </div>
    <hr />
    <!-- 左侧树型菜单 -->
    <div>
      <h4>左侧树型菜单:</h4>
      <tree-menu :treeMenuData="treeMenuData"></tree-menu>
    </div>
    <hr />
    <h4>按钮:</h4>
    <!-- 按钮 -->
    <my-button type="danger" @btnClick="btnClick"></my-button>
    <hr />
    <h4>输入框:</h4>
    <!-- 输入框 -->
    <my-input placeholder="请输入内容"></my-input>
    <hr />
    <h4>下拉选择器:</h4>
    <!-- 下拉选项 -->
    <my-select :data="data" @setOption="setOption"></my-select>
    <hr />
    <h4>链接：</h4>
    <!-- 链接 -->
    <div>
      <my-link href="http://www.baidu.com" target="_blank">百度</my-link>
      <my-link href="http://www.taobao.com" type="success">淘宝</my-link>
      <my-link href="http://www.tmall.com" type="danger" target="_blank"
        >天猫</my-link
      >
      <my-link href="http://www.jd.com" type="warning">京东</my-link>
      <my-link href="http://www.bilibili.com" type="primary">bilibili</my-link>
    </div>
    <hr />
    <h4>五星好评：</h4>
    <!-- 五星好評 -->
    <my-stars :num="3" :size="30" @getStarNum="getStarNum"></my-stars>
    <hr />

    <!-- 放大镜 -->
    <div>
      <h4>放大镜：</h4>
      <!-- 定义用户配置的标签属性 -->
      <my-magnifier
        :link="'https://www.baidu.com'"
        :blank="true"
        :magnifierImgUrl="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h821%2F20180216%2F6687-fyrpeif0540896.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642960609&t=463e8d74ffc3e6144c9d84f549d7b1f4'"
        :imgWidth="375"
        :imgHeight="481"
        :magWidth="100"
        :magHeight="100"
        :imgAlt="'模特'"
      ></my-magnifier>
    </div>
    <hr />
    <!-- 轮播图 -->
    <div>
      <h4>轮播图：</h4>
      <my-carousel
        :autoplay="true"
        :duration="3000"
        :initial="0"
        :hasDot="true"
        :hasDirector="true"
        :dotBgColor="'orange'"
        :autoplayDir="'prev'"
        :courouselImgData="courouselImgData"
      >
      </my-carousel>
    </div>
    <hr />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      data: [
        {
          id: 1,
          value: "orange",
          text: "橙子",
        },
        {
          id: 2,
          value: "apple",
          text: "苹果",
        },
        {
          id: 3,
          value: "pear",
          text: "梨子",
        },
      ],
      courouselImgData: [
        {
          courouselImgUrl:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/775d7c643be01abf0de63d030c1ae4f5.jpg?w=2452&h=920",
        },
        {
          courouselImgUrl:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a532e33470d046b3f044d5ea49fc5e9e.png?thumb=1&w=1226&h=460&f=webp&q=90",
        },
        {
          courouselImgUrl:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3e34ddd6b7bcbfb90ed09e871d291593.png?thumb=1&w=1226&h=460&f=webp&q=90",
        },
        {
          courouselImgUrl:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c149e20d569b96c0a99f62e5108ad29.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
        },
      ],
      treeMenuData: [
        {
          id: 1,
          title: "菜单1",
        },
        {
          id: 2,
          title: "菜单2",
        },
        {
          id: 3,
          title: "菜单3",
          children: [
            {
              id: 31,
              title: "菜单3-1",
            },
            {
              id: 32,
              title: "菜单3-2",
              children: [
                {
                  id: 321,
                  title: "菜单3-2-1",
                },
                {
                  id: 322,
                  title: "菜单3-2-2",
                  children: [
                    {
                      id: 3221,
                      title: "菜单3-2-2-1",
                    },
                    {
                      id: 3222,
                      title: "菜单3-2-2-2",
                    },
                    {
                      id: 3223,
                      title: "菜单3-2-2-3",
                      children: [
                        {
                          id: 32231,
                          title: "菜单3-2-2-3-1",
                        },
                        {
                          id: 32232,
                          title: "菜单3-2-2-3-2",
                        },
                        {
                          id: 32233,
                          title: "菜单3-2-2-3-3",
                        },
                      ],
                    },
                  ],
                },
                {
                  id: 323,
                  title: "菜单3-2-3",
                },
              ],
            },
            {
              id: 33,
              title: "菜单3-3",
            },
          ],
        },
        {
          id: 4,
          title: "菜单4",
        },
        {
          id: 5,
          title: "菜单5",
        },
      ],
      modalShow: false,
      selectorInputData: [
        {
          id: 1,
          value: "react",
          text: "ReactJS",
        },
        {
          id: 2,
          value: "react-hooks",
          text: "React Hooks",
        },
        {
          id: 3,
          value: "vue2",
          text: "Vue2.x",
        },
        {
          id: 4,
          value: "vue3",
          text: "Vue3.x",
        },
        {
          id: 5,
          value: "angular1",
          text: "AngularJS",
        },
        {
          id: 6,
          value: "angular",
          text: "Angular",
        },
      ],
    };
  },
  methods: {
    btnClick(e) {
      console.log(e);
    },
    setOption(index, item) {
      console.log(index, item);
    },
    getStarNum(number) {
      this.starNum = number;
    },
    modalConfirm() {
      console.log("modalConfirm");
    },
    modalClose() {
      this.modalShow = false;
    },
    openModal() {
      this.modalShow = true;
    },
    //修改searchInput组件里传递过来的事件
    setItemValue(value) {
      console.log(value);
    },
  },
};
</script>

<style lang="scss"></style>
